<template>
  <div class="channel">
    <div class="header">
      <img class="bg-img" src="@/assets/img/channel/title_bg.png" />
      <div class="title">
        <img src="@/assets/img/channel/channel-title.svg" />
      </div>
    </div>

    <div class="content">
      <div class="fz-24 fw-bold">主人，您好！</div>
      <p class="c-999">请选择您的团购券码购买渠道</p>

      <div class="channel-list">
        <section class="channel-item" :class="item.class" v-for="(item, index) in channelList" :key="index" @click="goChannel(item)">
          <div class="item-left">
            <img :src="item.icon" alt="" />
            <span class="ml-10 fz-16">{{ item.label }}</span>
          </div>
          <van-icon name="arrow" />
        </section>
      </div>
    </div>

    <div class="contact ta-c fz-16 wd-100p" @click="onContact">
      <van-icon name="service-o" class="fz-16" />
      联系客服
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { useRoute, useRouter } from "vue-router";
import { onContact } from "@/utils";
import {koubei, meituan} from '@/const/image'

const channelList = [{
  icon: koubei,
  label: '口碑团购券兑换',
  class: 'koubei',
  channel: '734',
},{
  icon: meituan,
  label: '美团团购券兑换',
  class: 'meituan',
  channel: '615',
},]

export default defineComponent({
  name: 'Channel',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const goChannel = (item) => {
      router.push({
        path: '/home',
        query: {
          ...route.query,
          channel: item.channel,
          clearCode: true,
          showGuide: true,
        }
      })
    }
    return {
      onContact,
      channelList,
      goChannel
    }
  }
});
</script>

<style lang="less" scoped>
.channel {
  background: #f4f3f3;
  min-height: 100vh;
  .header {
    position: relative;
    .bg-img {
      height: 160px;
      width: 100%;
    }
    .title {
      position: absolute;
      left: 30.73%;
      right: 30.93%;
      top: 20.79%;
      bottom: 74.94%;
    }
  }
  .content {
    padding: 20px 15px;
    .channel-list {
      .channel-item {
        
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        background-size: 100% 100%;
        margin-bottom: 12px;
        &.koubei {
          color: #8E4222;
          background-image: url('~@/assets/img/channel/koubei_bg.png');
        }
        &.meituan {
          color: #DA8302;
          background-image: url('~@/assets/img/channel/meituan_bg.png');
        }
        .item-left {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  
  .contact {
    position: absolute;
    bottom: 24px;
  }
}
</style>
